<template>
  <div class="data-cardText">
    <!-- <vxe-tooltip :content="tips" enterable>
      <i class="vxe-icon--question"></i>
    </vxe-tooltip> -->
    <el-alert title="报表说明" type="warning" :description="tips" show-icon>
    </el-alert>
    <el-row class="data-1" type="flex" justify="space-between">
      <el-col :span="span1" v-for="(item, index) in dataList1" :key="index">
        <el-card :body-style="{ padding: '0px' }" shadow="hover">
          <div class="item">
            <div class="item-header"> <a>{{ item.fillTitle?item.fillTitle:'&nbsp;' }}</a></div>
            <div class="item-content">{{ ''+item.typeName+'('+item.reportCnt+')' }}</div>
            <div class="item-footer">&nbsp;
              <!-- <el-popover title="选择" width="260" :placement="index===dataList1.length-1?'bottom-end':'bottom-start'"
                trigger="click" v-model="popoverVisable[item.typeCode]">
                <udfFillingReportHis :ref="'udfFillingReportHis-'+item.typeCode" :backFun="hisBackFun" :cycleType="item.typeCode"></udfFillingReportHis>
                <el-button slot="reference" type="text" class="button">历史 <i class="el-icon-arrow-right"></i></el-button>
              </el-popover> -->
              <span>
                <el-button type="text" class="button" @click.stop="hisClick(item)"><span>历史</span><i class="el-icon-arrow-right"></i></el-button>
              </span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row class="data-2" style="margin-top:10px;">
      <el-col :span="24" v-for="(item, index) in dataList2" :key="index">
        <el-card :body-style="{ padding: '0px' }" shadow="hover">
          <div class="item">
            <!-- <div class="item-header">
              <a>
                {{ ''+item.typeName+'('+(item.reportCnt?item.reportCnt:0)+')'
                +'&nbsp;&nbsp;&nbsp;&nbsp;'+(dataForm.fillTitle) }}
              </a>
            </div> -->
            <div class="item-content">
              <el-col :span="4">
                <div style="text-align:center;">
                  <span>{{item.fillTitle}}</span><br />
                  <span>{{ ''+item.typeName+'('+(item.reportCnt?item.reportCnt:0)+')' }}</span>
                </div>
              </el-col>
              <el-col :span="4">
                <div style="text-align:center;" @click="openInfo(item,'cntAll')">
                  <span>应提报</span><br />
                  <span>{{ item.cntAll }}</span>
                </div>
              </el-col>
              <el-col :span="4">
                <div style="text-align:center;" @click="openInfo(item,'cntYes')">
                  <span>完成</span><br />
                  <span>{{ item.cntYes }}</span>
                </div>
              </el-col>
              <el-col :span="5">
                <div style="text-align:center;" @click="openInfo(item,'cntIng')">
                  <span>正在</span><br />
                  <span>{{ item.cntIng }}</span>
                </div>
              </el-col>
              <el-col :span="5">
                <div style="text-align:center;" @click="openInfo(item,'cntNo')">
                  <span>未开始</span><br />
                  <span>{{ item.cntNo }}</span>
                </div>
              </el-col>
            </div>
            <div class="item-footer">&nbsp;
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- <el-row style="margin-top:10px;">
      <vxe-table ref="xTable" :loading="dataListLoading" class="vxe-table-element" auto-resize @select-change="dataListSelectionChangeHandleVex"
        @select-all="dataListSelectionAllChangeHandleVex" :data="dataList" highlight-current-row>
        <vxe-table-column field="btypeName" title="单位"></vxe-table-column>
        <vxe-table-column field="cntAll" title="应报"> </vxe-table-column>
        <vxe-table-column field="cntYes" title="已报"> </vxe-table-column>
        <vxe-table-column field="cntNo" title="未报"> </vxe-table-column>
        <vxe-table-column field="cntIng" title="进行中"> </vxe-table-column>
      </vxe-table>
      <el-pagination :current-page="page" :page-sizes="pageSizes" :page-size="limit" :total="total" layout="total, sizes, prev, pager, next, jumper"
        @size-change="pageSizeChangeHandle" @current-change="pageCurrentChangeHandle">
      </el-pagination>
    </el-row> -->
    <!-- <udfFillingReportHis v-if="udfFillingReportHisVisable" ref="udfFillingReportHis" :backFun="hisBackFun"></udfFillingReportHis> -->
    <!-- <el-popover ref="popover" title="选择" width="260" placement="bottom-start" trigger="click">
      <udfFillingReportHis ref="udfFillingReportHis" :backFun="hisBackFun"></udfFillingReportHis>
    </el-popover> -->
  </div>
</template>

<style>
.data-cardText .item {
  padding: 5px 5px 20px 5px;
  margin: 10px 20px;
  cursor: pointer;
}
.data-cardText .item-header {
  position: relative;
  text-align: left;
}
.data-cardText .item-header i {
  font-size: 26px;
  color: #009688;
}
.data-cardText .item-header a {
  margin-left: 0px;
  margin-right: 5px;
  /* position: absolute; */
  bottom: 5px;
}
.data-cardText .item-content {
  margin-top: 5px;
  margin-bottom: 5px;
  color: #333;
}
.data-cardText .item-footer > span {
  margin-right: 0px;
  float: right;
}
</style>

<script>
import mixinViewModule from '@/mixins/view-module'
import * as utils from './common/utils'
import udfFillingReportHis from './udfFillingReport-his'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      tips: '第一栏 统计当前周期下的正在填报的报表数量。' +
        '第二栏 统计正在提报的报表的单位(正在、未开始、完成)数据。',
      popoverVisable: {},
      udfFillingReportHisVisable: false,
      span1: 4,
      currentDate: new Date(),
      searchShow: true,
      mixinViewModuleOptions: {
        activatedIsNeed: false,
        getDataListURL: '/udf/udfFillingReport/page',
        getDataListIsPage: true
      },
      dataList1: [],
      dataList2: [],
      dataList3: [],
      pickerVal: {},
      pickerValDel: {},
      dataForm: {
        flag: '1',
        title: '',
        fillCycle: '',
        fillCycles: '',
        typeCode: '',
        cntType: ''
      }
    }
  },
  components: {
    udfFillingReportHis
  },
  created () {
    this.pickerVal = utils.initDate()
    this.pickerValDel = utils.delDate(this.pickerVal)
    this.dataForm.fillCycles = utils.getObjectValues(this.pickerValDel).join(',')
  },
  activated () {
    this.refresh()
  },
  methods: {
    // hisBackFun (typeCode, pickerVal) {
    //   this.popoverVisable[typeCode] = false
    //   this.pickerVal[typeCode] = pickerVal[typeCode]
    //   this.pickerValDel = utils.delDate(this.pickerVal)
    //   this.dataForm.fillCycles = utils.getObjectValues(this.pickerValDel).join(',')
    //   // 数据加载
    //   this.refresh(typeCode)
    // },
    hisClick (row) {
      let typeCode = row.typeCode
      // 打开路由
      var router = {
        name: 'udf-udfFillingMonitor',
        id: typeCode,
        menuId: this.$route.meta.menuId,
        oldName: 'udf-udfFillingReport',
        path: 'udf/udfFillingTaskMonitor',
        title: row.typeName + ' 填报监控'
      }
      var params = {
        cycleType: row.typeCode,
        pickerVal: this.pickerVal
      }
      this.openNewTab(this.$router, router, params)
    },
    openInfo (row, cntType) {
      let typeCode = row.typeCode
      // 打开路由
      var router = {
        name: 'udf-udfFillingReportInfo',
        id: typeCode,
        menuId: this.$route.meta.menuId,
        oldName: 'udf-udfFillingReport',
        path: 'udf/udfFillingReportInfo',
        title: row.typeName + ' 监控详情'
      }
      var params = {
        ...row,
        cntType
      }
      this.openNewTab(this.$router, router, params)
    },
    refresh (typeCode) {
      // 数据加载
      this.get1().then(() => {
        return this.get2()
      })
    },
    // itemClickEvent1 (row) {
    // this.dataForm.typeCode = row.typeCode
    // this.dataForm.fillCycle = row.fillCycle
    // this.dataForm.fillTitle = row.fillTitle
    //   this.get2().then(() => {
    //     return this.itemClickEvent2('cntAll')
    //   })
    // },
    // itemClickEvent2 (val) {
    // this.dataForm.cntType = val
    // return this.getDataList()
    // },
    get1 () {
      return new Promise((resolve, reject) => {
        let params = {}
        params.flag = '1'
        params.fillCycles = this.dataForm.fillCycles
        params.pickerValDel = this.pickerValDel
        let url = this.mixinViewModuleOptions.getDataListURL
        this.$http.get(url, { params: params }).then(({ data: res }) => {
          this.dataList1 = res.data.list
          this.span1 = Math.floor(24 / this.dataList1.length)
          resolve()
        })
      })
    },
    get2 () {
      return new Promise((resolve, reject) => {
        let params = { ...this.dataForm }
        params.flag = '2'
        let url = this.mixinViewModuleOptions.getDataListURL
        this.$http.get(url, { params: params }).then(({ data: res }) => {
          let arr = []
          let row
          for (const item of this.dataList1) {
            if (item.reportCnt > 0) {
              row = this.$getDataItem(res.data.list, item.typeCode, 'typeCode')
              row.reportCnt = item.reportCnt
              row.fillTitle = item.fillTitle
              arr.push(row)
            }
          }
          this.dataList2 = arr
          resolve()
        })
      })
    }
    // // 获取数据列表
    // getDataList () {
    //   return new Promise((resolve, reject) => {
    //     let params = { ...this.dataForm }
    //     params.flag = '3'
    //     let url = this.mixinViewModuleOptions.getDataListURL
    //     this.dataListLoading = true
    //     this.$http.get(url,
    //       {
    //         params: {
    //           order: this.order,
    //           orderField: this.orderField,
    //           sumFields: this.sumFields,
    //           page: this.mixinViewModuleOptions.getDataListIsPage ? this.page : null,
    //           limit: this.mixinViewModuleOptions.getDataListIsPage ? this.limit : null,
    //           ...params
    //         }
    //       }
    //     ).then(({ data: res }) => {
    //       this.dataListLoading = false
    //       this.dataList = []
    //       if (res.code !== 0) {
    //         this.dataList = []
    //         this.total = 0
    //         reject(new Error(false))
    //         return
    //       }
    //       this.dataList = this.mixinViewModuleOptions.getDataListIsPage ? res.data.list : res.data
    //       this.total = this.mixinViewModuleOptions.getDataListIsPage ? res.data.total : 0
    //       this.sumData = this.mixinViewModuleOptions.getDataListIsPage ? res.data.sumData : {}
    //       if (this.total > 0 && Math.ceil(this.total / this.limit) === 1) {
    //         this.page = 1
    //       }
    //       resolve(this.dataList)
    //     }).catch((e) => {
    //       this.dataListLoading = false
    //       console.error(e)
    //       reject(new Error(false))
    //     })
    //   })
    // },
    // // 分页, 每页条数
    // pageSizeChangeHandle (val) {
    //   this.page = 1
    //   this.limit = val
    //   this.getDataList()
    // },
    // // 分页, 当前页
    // pageCurrentChangeHandle (val) {
    //   this.page = val
    //   this.getDataList()
    // }
  }
}
</script>
